<template>
  <div class="goods-action">
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-icon
        icon="cart-o"
        @click="gotocart"
        text="购物车"
        :badge="store.getters.total"
      />
      <van-action-bar-icon icon="shop-o" text="店铺" badge="0" />
      <van-action-bar-button type="warning" @click="add" text="加入购物车" />
      <van-action-bar-button
        type="danger"
        @click="nowBuy"
        color="#FF6699"
        text="立即购买"
      />
    </van-action-bar>
  </div>
</template>

<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
// 获取this
const ctx = getCurrentInstance();
const store = useStore();
const router = useRouter();
const gotocart = () => {
  router.push("/category");
  store.commit("setstatus", true);
};

// 加入购物车事件
const add = () => {
  ctx.emit("add");
};
// 立即购买
const nowBuy = () => {
  ctx.emit("nowBuy");
};
</script>

<style>
.goods-action {
  z-index: 99;
}
</style>